<template>
  <div class="all">
    <div class="allbg">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="'/components/main'">首页</el-breadcrumb-item>
        <el-breadcrumb-item>原始数据服务</el-breadcrumb-item>
        <el-breadcrumb-item>{{ menuName2 }}</el-breadcrumb-item>
        <!-- <el-breadcrumb-item>防洪抗旱</el-breadcrumb-item> -->
      </el-breadcrumb>
      <el-container>
        <el-aside width="200" class="leftnav">
          <el-menu
            background-color="#F8F8F8"
            text-color="#333"
            active-text-color="red"
            router
          >
            <el-menu-item index="serviceone">
              <i class="el-icon-sunny"></i>
              <span slot="title">
                <router-link to="">防洪抗旱</router-link>
              </span>
            </el-menu-item>

            <el-menu-item index="servicetwo">
              <i class="el-icon-heavy-rain"></i>
              <span slot="title">
                <router-link to="">河流水系</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="servicethree">
              <i class="el-icon-position"></i>
              <span slot="title">
                <router-link to="">水环境</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="servicefour">
              <i class="el-icon-sunset"></i>
              <span slot="title">
                <router-link to="">水利工程</router-link>
              </span>
            </el-menu-item>
            <el-menu-item index="servicefive">
              <i class="el-icon-message"></i>
              <router-link to="">水文</router-link>
            </el-menu-item>
            <el-menu-item index="servicesix">
              <i class="el-icon-orange"></i>
              <router-link to="">水资源</router-link>
            </el-menu-item>
            <el-menu-item index="serviceseven">
              <i class="el-icon-time"></i>
              <router-link to="">统计年鉴</router-link>
            </el-menu-item>
            <el-menu-item index="serviceseight">
              <i class="el-icon-discount"></i>
              <router-link to="">政策规划</router-link>
            </el-menu-item>
            <el-menu-item index="servicesnine">
              <i class="el-icon-money"></i>
              <router-link to="">地理空间</router-link>
            </el-menu-item>
            <el-menu-item index="servicesten">
              <i class="el-icon-set-up"></i>
              <router-link to="">其他</router-link>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <!-- 右边子页面 -->
          <router-view />
          </el-main>
      </el-container>
    </div>
  </div>
</template>
<script>
// import {  } from "../Api/api"; //调用接口

export default {
  data() {
    return {
      menuName2: ""
    };
  },
  watch:{
    $route(val){
      this.menuName2 = val.meta.title;
    },
  },
  created(){
    this.menuName2 = this.$route.meta.title;
  },
  methods: {},
};
</script>
<style scoped lang="scss">
* {
  text-decoration: none;
}
.all {
  width: 100%;
  margin: 0 auto;
  background-color: white;
  .allbg {
    width: 90%;
    margin: 0 auto;
  }
  .el-breadcrumb {
    padding-top: 20px;
  }
  .el-container {
    padding-top: 20px;
  }
  .leftnav .el-menu-item {
    border-bottom: 1px solid #e5e5e5;
    height: 40px;
    line-height: 40px;
  }

  .leftnav .el-menu {
    border-right: none !important;
  }
  .leftnav a {
    color: #333;
  }
   .leftnav a:hover {
    color: white;
  }
  .el-main{
    padding: 0px;
  }

}
</style>
